<template>
    <div class="backgImage">
        <!-- 监控信息 -->
        <div class="div1">
            <TitleView title="监控信息" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <Monitor :data="DataMonitor"></Monitor>
            </div>
        </div>
        <!-- 交接班信息 -->
        <div class="div2">
            <TitleView title="交接班信息" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <Handover :data="DataHandover"></Handover>
            </div>
        </div>
        <!-- 视频监控 -->
        <div class="div3">
            <TitleView title="视频监控" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <Video :data="DataVideo"></Video>
            </div>
        </div>
    </div>

</template>

<script>
import { threeD_right1, threeD_right2, threeD_right3 } from '@/request/api.js'

import Handover from './components/Handover.vue';
import Monitor from './components/Monitor.vue';
import Video from './components/Video.vue';
export default {
    components: {
        Monitor,
        Handover,
        Video
    },
    data() {
        return {
            DataVideo: [
                {
                    name: "视频监控1",
                    time: "09:45:13",
                    url: "video"
                }, {
                    name: "视频监控2",
                    time: "09:45:13",
                    url: "video"
                }, {
                    name: "视频监控3",
                    time: "09:45:13",
                    url: "video"
                }, {
                    name: "视频监控4",
                    time: "09:45:13",
                    url: "video"
                }
            ],
            DataMonitor: [
                {
                    title: "监控总数统计",
                    number: "122",
                    id: 0
                }, {

                    title: "装置区",
                    number: "22",
                    id: 1
                }, {

                    title: "办公区",
                    number: "12",
                    id: 2
                }, {

                    title: "罐区",
                    number: "32",
                    id: 3
                },
            ],
            DataHandover: [],
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            threeD_right1().then((res) => {
                console.log("监控信息:", res);
                if (res) {
                    this.DataMonitor=res.data
                }
                // this.DataP.number = res.data.toString()
            })
            threeD_right2().then((res) => {
                console.log("交接班信息:", res);
                this.DataHandover = res.data
            })
            threeD_right3().then((res) => {
                console.log("视频监控:", res);

            })
        }
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 257px;

    .div1_d {
        margin-top: 25px;
    }
}

.div2 {
    height: 285px;

    .div1_d {
        margin-top: 15px;
    }
}

.div3 {
    margin-top: 10px;

    .div1_d {
        margin-top: 15px;
    }
}
</style>